<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="icon.png">
  <link id="flipper-theme-import" rel="stylesheet">
  <title>Flipper</title>
  <script>
    window.flipperConfig = {
      theme: 'light',
      entryPoint: 'flipper-ui-browser/src/index-fast-refresh.bundle?platform=web&dev=true&minify=false',
      debug: true,
    }
  </script>
  <style>
    #loading {
      -webkit-app-region: drag;
      z-index: 999999;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      padding: 50px;
      overflow: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #525252;
      text-align: center;
    }

    .__infinity-dev-box-error {
      background-color: red;
      font-family: monospace;
      font-size: 12px;
      z-index: 10;
      bottom: 0;
      left: 0;
      position: absolute;
    }
  </style>
</head>

<body>
  <div id="root">
    <div id="loading">
      Loading...
    </div>
  </div>


  <div class="__infinity-dev-box __infinity-dev-box-error" hidden>

  </div>

  <script>
    (function () {
      // FIXME: needed to make Metro work
      window.global = window;
      let suppressErrors = false;

      const socket = new WebSocket(`ws://${location.host}`);

      socket.addEventListener('message', ({ data: dataRaw }) => {
        const message = JSON.parse(dataRaw.toString())

        if (message.event === 'hasErrors') {
          openError(message.payload);
          suppressErrors = true;
        }
      })

      socket.addEventListener('error', () => {
        openError('WebSocket -> error');
        suppressErrors = true;
      })


      function openError(text) {
        if (suppressErrors) {
          return;
        }

        const box = document.querySelector('.__infinity-dev-box-error');
        box.removeAttribute('hidden');
        box.textContent = text;
        box.appendChild(closeButton);
      }
      window.flipperShowError = openError;
      window.flipperHideError = () => {
        const box = document.querySelector('.__infinity-dev-box-error');
        box.setAttribute('hidden', true);
      }

      const closeButton = document.createElement('button');
      closeButton.addEventListener('click', window.flipperHideError);
      closeButton.textContent = 'X';

      // load correct theme (n.b. this doesn't handle system value specifically, will assume light in such cases)
      try {
        if (window.flipperConfig.theme === 'dark') {
          document.getElementById('flipper-theme-import').href = "themes/dark.css";
        } else {
          document.getElementById('flipper-theme-import').href = "themes/light.css";
        }
      } catch (e) {
        console.error("Failed to initialize theme", e);
        document.getElementById('flipper-theme-import').href = "themes/light.css";
      }

      function init() {
        const script = document.createElement('script');
        script.src = window.flipperConfig.entryPoint;

        script.onerror = (e) => {
          openError('Script failure. Check Chrome console for more info.');
        };

        document.body.appendChild(script);
      }
      init();
    })();
  </script>
</body>

</html>